<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 标签完全参考指南</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js用于可视化 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色作为主色调
                        secondary: '#10b981', // 绿色作为辅助色
                        accent: '#8b5cf6', // 紫色作为强调色
                        dark: '#1e293b', // 深色用于文本
                        light: '#f8fafc' // 浅色用于背景
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            }
        }
    </style>
    <!-- 全局样式 -->
    <style>
        body {
            scroll-behavior: smooth;
        }
        /* 代码高亮样式 */
        .code-block {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            background-color: #f1f5f9;
            border-radius: 0.5rem;
            padding: 1rem;
            overflow-x: auto;
            line-height: 1.5;
        }
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.5s ease forwards;
        }
        /* 标签卡片悬停效果 */
        .tag-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
        }
    </style>
</head>
<body class="font-inter bg-light text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 bg-white/90 backdrop-blur-md shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-html5 text-3xl text-orange-500"></i>
                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">HTML5 标签参考</h1>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#intro" class="text-dark hover:text-primary transition-colors">简介</a>
                <a href="#structure" class="text-dark hover:text-primary transition-colors">结构标签</a>
                <a href="#content" class="text-dark hover:text-primary transition-colors">内容标签</a>
                <a href="#forms" class="text-dark hover:text-primary transition-colors">表单标签</a>
                <a href="#multimedia" class="text-dark hover:text-primary transition-colors">多媒体标签</a>
                <a href="#examples" class="text-dark hover:text-primary transition-colors">示例</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-dark hover:text-primary transition-colors">
                <i class="fa fa-bars text-2xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#intro" class="py-2 text-dark hover:text-primary transition-colors">简介</a>
                <a href="#structure" class="py-2 text-dark hover:text-primary transition-colors">结构标签</a>
                <a href="#content" class="py-2 text-dark hover:text-primary transition-colors">内容标签</a>
                <a href="#forms" class="py-2 text-dark hover:text-primary transition-colors">表单标签</a>
                <a href="#multimedia" class="py-2 text-dark hover:text-primary transition-colors">多媒体标签</a>
                <a href="#examples" class="py-2 text-dark hover:text-primary transition-colors">示例</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow pt-20">
        <!-- 英雄区域 -->
        <section class="bg-gradient-primary text-white py-16 md:py-24">
            <div class="container mx-auto px-4">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 leading-tight text-shadow">HTML5 标签完全参考指南</h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] mb-8 opacity-90">掌握所有HTML5标签的使用方法、属性和最佳实践</p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <a href="#structure" class="bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition-all-300 shadow-lg">
                            开始学习 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#examples" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white/10 transition-all-300">
                            查看示例 <i class="fa fa-code ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 简介部分 -->
        <section id="intro" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-8 text-center">什么是HTML5？</h2>
                    <div class="grid md:grid-cols-2 gap-8 items-center">
                        <div class="animate-fadeIn" style="animation-delay: 0.1s;">
                            <p class="text-lg mb-4">HTML5是HTML（超文本标记语言）的最新版本，于2014年由W3C正式发布。它引入了许多新特性和标签，使网页开发更加语义化、多媒体化和交互化。</p>
                            <p class="mb-6">HTML5的主要目标是改进Web应用程序的功能，减少对外部插件的依赖，并提供更丰富的原生功能支持。</p>
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                    <span>更强大的语义化标签</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                    <span>原生多媒体支持（无需Flash）</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                    <span>增强的表单控件和验证</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                    <span>Canvas绘图和SVG支持</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                    <span>本地存储和离线应用能力</span>
                                </li>
                            </ul>
                        </div>
                        <div class="animate-fadeIn" style="animation-delay: 0.3s;">
                            <div class="bg-gray-50 p-6 rounded-xl shadow-md">
                                <h3 class="text-xl font-semibold mb-4">HTML5 市场占有率</h3>
                                <canvas id="html5Chart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 结构标签部分 -->
        <section id="structure" class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-12 text-center">HTML5 语义化结构标签</h2>
                <p class="text-lg text-center max-w-3xl mx-auto mb-12">HTML5引入了一系列语义化标签，使网页结构更加清晰，有助于搜索引擎优化和无障碍访问。</p>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                    <!-- header 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;header&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义文档的头部区域，通常包含标题、导航、logo等。</p>
                        <div class="code-block text-sm">
                            &lt;header&gt;
                            <br>&nbsp;&nbsp;&lt;h1&gt;网站标题&lt;/h1&gt;
                            <br>&lt;/header&gt;
                        </div>
                    </div>

                    <!-- nav 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;nav&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义导航链接的容器，用于页面的主要导航部分。</p>
                        <div class="code-block text-sm">
                            &lt;nav&gt;
                            <br>&nbsp;&nbsp;&lt;ul&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;
                            <br>&nbsp;&nbsp;&lt;/ul&gt;
                            <br>&lt;/nav&gt;
                        </div>
                    </div>

                    <!-- main 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;main&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义文档的主要内容区域，不包括侧边栏、导航等。</p>
                        <div class="code-block text-sm">
                            &lt;main&gt;
                            <br>&nbsp;&nbsp;&lt;section&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;<!-- 主要内容 -->
                            <br>&nbsp;&nbsp;&lt;/section&gt;
                            <br>&lt;/main&gt;
                        </div>
                    </div>

                    <!-- section 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;section&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义文档中的一个章节或区域，通常包含一个标题。</p>
                        <div class="code-block text-sm">
                            &lt;section&gt;
                            <br>&nbsp;&nbsp;&lt;h2&gt;章节标题&lt;/h2&gt;
                            <br>&nbsp;&nbsp;&lt;p&gt;章节内容...&lt;/p&gt;
                            <br>&lt;/section&gt;
                        </div>
                    </div>

                    <!-- article 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;article&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义独立的、完整的内容块，如博客文章、评论等。</p>
                        <div class="code-block text-sm">
                            &lt;article&gt;
                            <br>&nbsp;&nbsp;&lt;h2&gt;文章标题&lt;/h2&gt;
                            <br>&nbsp;&nbsp;&lt;p&gt;文章内容...&lt;/p&gt;
                            <br>&lt;/article&gt;
                        </div>
                    </div>

                    <!-- aside 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;aside&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义页面的侧边栏或补充内容，与主要内容相关但非必要。</p>
                        <div class="code-block text-sm">
                            &lt;aside&gt;
                            <br>&nbsp;&nbsp;&lt;h3&gt;相关链接&lt;/h3&gt;
                            <br>&nbsp;&nbsp;&lt;ul&gt;...&lt;/ul&gt;
                            <br>&lt;/aside&gt;
                        </div>
                    </div>

                    <!-- footer 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;footer&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义文档的页脚，通常包含版权信息、联系方式等。</p>
                        <div class="code-block text-sm">
                            &lt;footer&gt;
                            <br>&nbsp;&nbsp;&lt;p&gt;© 2023 版权所有&lt;/p&gt;
                            <br>&lt;/footer&gt;
                        </div>
                    </div>

                    <!-- figure 和 figcaption 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;figure&gt; / &lt;figcaption&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">用于组合图表、图片及其说明文字。</p>
                        <div class="code-block text-sm">
                            &lt;figure&gt;
                            <br>&nbsp;&nbsp;&lt;img src="image.jpg" alt="图片"&gt;
                            <br>&nbsp;&nbsp;&lt;figcaption&gt;图片说明&lt;/figcaption&gt;
                            <br>&lt;/figure&gt;
                        </div>
                    </div>

                    <!-- address 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-primary">&lt;address&gt;</h3>
                            <span class="bg-blue-100 text-primary text-xs px-2 py-1 rounded">语义标签</span>
                        </div>
                        <p class="mb-4">定义联系信息，通常包含在footer中。</p>
                        <div class="code-block text-sm">
                            &lt;address&gt;
                            <br>&nbsp;&nbsp;联系我们: contact@example.com
                            <br>&lt;/address&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容标签部分 -->
        <section id="content" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-12 text-center">HTML5 内容标签</h2>
                <p class="text-lg text-center max-w-3xl mx-auto mb-12">这些标签用于创建和组织网页中的各种内容元素。</p>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                    <!-- 文本格式化标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;h1&gt; 到 &lt;h6&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">标题标签</span>
                        </div>
                        <p class="mb-4">定义文档的标题层级，h1是最高级标题，h6是最低级。</p>
                        <div class="code-block text-sm">
                            &lt;h1&gt;一级标题&lt;/h1&gt;
                            <br>&lt;h2&gt;二级标题&lt;/h2&gt;
                            <br>&lt;h3&gt;三级标题&lt;/h3&gt;
                        </div>
                    </div>

                    <!-- p 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;p&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">段落标签</span>
                        </div>
                        <p class="mb-4">定义一个段落，是最常用的文本容器。</p>
                        <div class="code-block text-sm">
                            &lt;p&gt;这是一个段落文本，包含了一些内容。&lt;/p&gt;
                        </div>
                    </div>

                    <!-- a 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;a&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">链接标签</span>
                        </div>
                        <p class="mb-4">定义超链接，用于从一个页面跳转到另一个页面。</p>
                        <div class="code-block text-sm">
                            &lt;a href="https://example.com" target="_blank"&gt;
                            <br>&nbsp;&nbsp;访问示例网站
                            <br>&lt;/a&gt;
                        </div>
                    </div>

                    <!-- img 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;img&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">图像标签</span>
                        </div>
                        <p class="mb-4">定义图像，src属性指定图像路径，alt属性提供替代文本。</p>
                        <div class="code-block text-sm">
                            &lt;img src="image.jpg" alt="图片描述" 
                            <br>&nbsp;&nbsp;width="300" height="200"&gt;
                        </div>
                    </div>

                    <!-- ul, ol, li 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;ul&gt;, &lt;ol&gt;, &lt;li&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">列表标签</span>
                        </div>
                        <p class="mb-4">定义无序列表(ul)和有序列表(ol)，li是列表项。</p>
                        <div class="code-block text-sm">
                            &lt;ul&gt;
                            <br>&nbsp;&nbsp;&lt;li&gt;列表项1&lt;/li&gt;
                            <br>&nbsp;&nbsp;&lt;li&gt;列表项2&lt;/li&gt;
                            <br>&lt;/ul&gt;
                        </div>
                    </div>

                    <!-- table 相关标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;table&gt; 相关</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">表格标签</span>
                        </div>
                        <p class="mb-4">用于创建表格，包括table、thead、tbody、tr、th、td等标签。</p>
                        <div class="code-block text-sm">
                            &lt;table&gt;
                            <br>&nbsp;&nbsp;&lt;tr&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;表头&lt;/th&gt;
                            <br>&nbsp;&nbsp;&lt;/tr&gt;
                            <br>&nbsp;&nbsp;&lt;tr&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;单元格&lt;/td&gt;
                            <br>&nbsp;&nbsp;&lt;/tr&gt;
                            <br>&lt;/table&gt;
                        </div>
                    </div>

                    <!-- div 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;div&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">容器标签</span>
                        </div>
                        <p class="mb-4">通用的块级容器，用于组织和布局内容。</p>
                        <div class="code-block text-sm">
                            &lt;div class="container"&gt;
                            <br>&nbsp;&nbsp;<!-- 内容 -->
                            <br>&lt;/div&gt;
                        </div>
                    </div>

                    <!-- span 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;span&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">行内标签</span>
                        </div>
                        <p class="mb-4">通用的行内容器，用于对文本的一部分应用样式。</p>
                        <div class="code-block text-sm">
                            &lt;p&gt;这是一段&lt;span class="highlight"&gt;
                            <br>&nbsp;&nbsp;高亮的文本&lt;/span&gt;。&lt;/p&gt;
                        </div>
                    </div>

                    <!-- blockquote 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-secondary">&lt;blockquote&gt;</h3>
                            <span class="bg-green-100 text-secondary text-xs px-2 py-1 rounded">引用标签</span>
                        </div>
                        <p class="mb-4">定义长引用，通常会有缩进样式。</p>
                        <div class="code-block text-sm">
                            &lt;blockquote cite="https://example.com"&gt;
                            <br>&nbsp;&nbsp;这是一段引用内容...
                            <br>&lt;/blockquote&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 表单标签部分 -->
        <section id="forms" class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-12 text-center">HTML5 表单标签</h2>
                <p class="text-lg text-center max-w-3xl mx-auto mb-12">HTML5增强了表单功能，提供了更多类型的输入控件和内置验证。</p>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                    <!-- form 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;form&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单标签</span>
                        </div>
                        <p class="mb-4">定义表单，包含输入控件并用于收集用户输入。</p>
                        <div class="code-block text-sm">
                            &lt;form action="/submit" method="post"&gt;
                            <br>&nbsp;&nbsp;<!-- 表单控件 -->
                            <br>&lt;/form&gt;
                        </div>
                    </div>

                    <!-- input 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;input&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">输入控件</span>
                        </div>
                        <p class="mb-4">最常用的表单输入控件，通过type属性可以创建多种输入类型。</p>
                        <div class="code-block text-sm">
                            &lt;input type="text" name="username"
                            <br>&nbsp;&nbsp;placeholder="请输入用户名" required&gt;
                        </div>
                    </div>

                    <!-- label 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;label&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单标签</span>
                        </div>
                        <p class="mb-4">为表单控件提供标签，提升可访问性。</p>
                        <div class="code-block text-sm">
                            &lt;label for="username"&gt;用户名：&lt;/label&gt;
                            <br>&lt;input type="text" id="username"&gt;
                        </div>
                    </div>

                    <!-- select 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;select&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单控件</span>
                        </div>
                        <p class="mb-4">创建下拉选择列表，包含多个option选项。</p>
                        <div class="code-block text-sm">
                            &lt;select name="country"&gt;
                            <br>&nbsp;&nbsp;&lt;option value="cn"&gt;中国&lt;/option&gt;
                            <br>&nbsp;&nbsp;&lt;option value="us"&gt;美国&lt;/option&gt;
                            <br>&lt;/select&gt;
                        </div>
                    </div>

                    <!-- textarea 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;textarea&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单控件</span>
                        </div>
                        <p class="mb-4">创建多行文本输入区域。</p>
                        <div class="code-block text-sm">
                            &lt;textarea name="message" rows="4"
                            <br>&nbsp;&nbsp;placeholder="请输入留言..."&gt;&lt;/textarea&gt;
                        </div>
                    </div>

                    <!-- button 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;button&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单控件</span>
                        </div>
                        <p class="mb-4">创建按钮，可用于提交表单或触发JavaScript操作。</p>
                        <div class="code-block text-sm">
                            &lt;button type="submit"&gt;提交&lt;/button&gt;
                            <br>&lt;button type="button"&gt;取消&lt;/button&gt;
                        </div>
                    </div>

                    <!-- HTML5 新增输入类型 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">HTML5 新增输入类型</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单控件</span>
                        </div>
                        <p class="mb-4">HTML5引入了多种新的输入类型，如email、tel、number等。</p>
                        <div class="code-block text-sm">
                            &lt;input type="email" placeholder="邮箱"&gt;
                            <br>&lt;input type="tel" placeholder="电话"&gt;
                            <br>&lt;input type="number" min="0" max="100"&gt;
                            <br>&lt;input type="date"&gt;
                            <br>&lt;input type="color"&gt;
                        </div>
                    </div>

                    <!-- fieldset 和 legend 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;fieldset&gt;, &lt;legend&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单标签</span>
                        </div>
                        <p class="mb-4">用于对表单中的相关元素进行分组，并提供标题。</p>
                        <div class="code-block text-sm">
                            &lt;fieldset&gt;
                            <br>&nbsp;&nbsp;&lt;legend&gt;个人信息&lt;/legend&gt;
                            <br>&nbsp;&nbsp;<!-- 表单控件 -->
                            <br>&lt;/fieldset&gt;
                        </div>
                    </div>

                    <!-- datalist 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-accent">&lt;datalist&gt;</h3>
                            <span class="bg-purple-100 text-accent text-xs px-2 py-1 rounded">表单控件</span>
                        </div>
                        <p class="mb-4">为输入框提供预定义的选项列表，用户可以选择或输入。</p>
                        <div class="code-block text-sm">
                            &lt;input list="browsers"&gt;
                            <br>&lt;datalist id="browsers"&gt;
                            <br>&nbsp;&nbsp;&lt;option value="Chrome"&gt;
                            <br>&nbsp;&nbsp;&lt;option value="Firefox"&gt;
                            <br>&lt;/datalist&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 多媒体标签部分 -->
        <section id="multimedia" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-12 text-center">HTML5 多媒体标签</h2>
                <p class="text-lg text-center max-w-3xl mx-auto mb-12">HTML5提供了原生的音频和视频支持，无需依赖第三方插件。</p>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                    <!-- video 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;video&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">多媒体标签</span>
                        </div>
                        <p class="mb-4">用于在网页中嵌入视频内容。</p>
                        <div class="code-block text-sm">
                            &lt;video width="320" height="240" controls&gt;
                            <br>&nbsp;&nbsp;&lt;source src="movie.mp4" type="video/mp4"&gt;
                            <br>&nbsp;&nbsp;您的浏览器不支持视频标签。
                            <br>&lt;/video&gt;
                        </div>
                    </div>

                    <!-- audio 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;audio&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">多媒体标签</span>
                        </div>
                        <p class="mb-4">用于在网页中嵌入音频内容。</p>
                        <div class="code-block text-sm">
                            &lt;audio controls&gt;
                            <br>&nbsp;&nbsp;&lt;source src="music.mp3" type="audio/mpeg"&gt;
                            <br>&nbsp;&nbsp;您的浏览器不支持音频标签。
                            <br>&lt;/audio&gt;
                        </div>
                    </div>

                    <!-- source 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;source&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">多媒体标签</span>
                        </div>
                        <p class="mb-4">为video或audio元素指定媒体文件的来源和类型。</p>
                        <div class="code-block text-sm">
                            &lt;video controls&gt;
                            <br>&nbsp;&nbsp;&lt;source src="movie.mp4" type="video/mp4"&gt;
                            <br>&nbsp;&nbsp;&lt;source src="movie.webm" type="video/webm"&gt;
                            <br>&lt;/video&gt;
                        </div>
                    </div>

                    <!-- canvas 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;canvas&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">绘图标签</span>
                        </div>
                        <p class="mb-4">创建一个可以通过JavaScript绘制图形的区域。</p>
                        <div class="code-block text-sm">
                            &lt;canvas id="myCanvas" width="300" height="150"
                            <br>&nbsp;&nbsp;style="border:1px solid #000000;"&gt;
                            <br>&lt;/canvas&gt;
                        </div>
                    </div>

                    <!-- svg 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;svg&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">矢量图形</span>
                        </div>
                        <p class="mb-4">定义可缩放矢量图形，是一种基于XML的图像格式。</p>
                        <div class="code-block text-sm">
                            &lt;svg width="100" height="100"&gt;
                            <br>&nbsp;&nbsp;&lt;circle cx="50" cy="50" r="40"
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;stroke="black" stroke-width="2" fill="red"&gt;
                            <br>&lt;/svg&gt;
                        </div>
                    </div>

                    <!-- track 标签 -->
                    <div class="tag-card bg-white rounded-xl p-6 shadow-md transition-all-300">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-orange-500">&lt;track&gt;</h3>
                            <span class="bg-orange-100 text-orange-500 text-xs px-2 py-1 rounded">多媒体标签</span>
                        </div>
                        <p class="mb-4">为video或audio元素指定字幕或其他文本轨道。</p>
                        <div class="code-block text-sm">
                            &lt;video controls&gt;
                            <br>&nbsp;&nbsp;&lt;source src="movie.mp4" type="video/mp4"&gt;
                            <br>&nbsp;&nbsp;&lt;track src="subtitles.vtt" kind="subtitles"
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;srclang="zh" label="中文字幕"&gt;
                            <br>&lt;/video&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 示例部分 -->
        <section id="examples" class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-12 text-center">HTML5 示例演示</h2>
                <p class="text-lg text-center max-w-3xl mx-auto mb-12">通过实际示例了解HTML5标签的使用方法和效果。</p>
                
                <div class="max-w-4xl mx-auto">
                    <!-- HTML5 结构示例 -->
                    <div class="bg-white rounded-xl p-8 shadow-md mb-12">
                        <h3 class="text-2xl font-bold mb-6 text-primary">HTML5 语义化结构示例</h3>
                        <div class="code-block mb-6">
                            &lt;!DOCTYPE html&gt;
                            <br>&lt;html lang="zh-CN"&gt;
                            <br>&lt;head&gt;
                            <br>&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt;
                            <br>&nbsp;&nbsp;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                            <br>&nbsp;&nbsp;&lt;title&gt;HTML5 语义化结构示例&lt;/title&gt;
                            <br>&lt;/head&gt;
                            <br>&lt;body&gt;
                            <br>&nbsp;&nbsp;&lt;header&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;网站标题&lt;/h1&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;导航链接&lt;/nav&gt;
                            <br>&nbsp;&nbsp;&lt;/header&gt;
                            <br>&nbsp;&nbsp;&lt;main&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;article&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;文章标题&lt;/h2&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;文章内容...&lt;/p&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/article&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;aside&gt;侧边栏&lt;/aside&gt;
                            <br>&nbsp;&nbsp;&lt;/main&gt;
                            <br>&nbsp;&nbsp;&lt;footer&gt;页脚信息&lt;/footer&gt;
                            <br>&lt;/body&gt;
                            <br>&lt;/html&gt;
                        </div>
                        <!-- 结构示例可视化 -->
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="bg-blue-50 p-4 border-b border-gray-200">
                                <div class="text-center text-blue-800 font-bold">&lt;header&gt;</div>
                            </div>
                            <div class="flex">
                                <div class="flex-1 p-4">
                                    <div class="bg-green-50 p-4 mb-4 border border-gray-200 rounded">
                                        <div class="text-center text-green-800 font-bold">&lt;main&gt;</div>
                                        <div class="mt-2 bg-green-100 p-3 rounded">
                                            <div class="text-center text-green-700 font-medium">&lt;article&gt;</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-1/4 p-4 border-l border-gray-200">
                                    <div class="bg-purple-50 p-4 border border-gray-200 rounded h-full">
                                        <div class="text-center text-purple-800 font-bold">&lt;aside&gt;</div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 p-4 border-t border-gray-200">
                                <div class="text-center text-gray-800 font-bold">&lt;footer&gt;</div>
                            </div>
                        </div>
                    </div>

                    <!-- 表单示例 -->
                    <div class="bg-white rounded-xl p-8 shadow-md mb-12">
                        <h3 class="text-2xl font-bold mb-6 text-accent">HTML5 表单示例</h3>
                        <div class="code-block mb-6">
                            &lt;form&gt;
                            <br>&nbsp;&nbsp;&lt;fieldset&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;个人信息&lt;/legend&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="name"&gt;姓名：&lt;/label&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="name" required&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="email"&gt;邮箱：&lt;/label&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="email" id="email" required&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="birthday"&gt;出生日期：&lt;/label&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="date" id="birthday"&gt;
                            <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
                            <br>&nbsp;&nbsp;&lt;/fieldset&gt;
                            <br>&nbsp;&nbsp;&lt;button type="submit"&gt;提交&lt;/button&gt;
                            <br>&lt;/form&gt;
                        </div>
                        <!-- 表单示例预览 -->
                        <div class="border border-gray-200 rounded-lg p-6 bg-gray-50">
                            <form class="space-y-4">
                                <fieldset class="border border-gray-300 rounded-lg p-4">
                                    <legend class="px-2 font-medium">个人信息</legend>
                                    <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
                                        <label for="demo-name" class="w-24">姓名：</label>
                                        <input type="text" id="demo-name" class="flex-1 px-3 py-2 border border-gray-300 rounded" required>
                                    </div>
                                    <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
                                        <label for="demo-email" class="w-24">邮箱：</label>
                                        <input type="email" id="demo-email" class="flex-1 px-3 py-2 border border-gray-300 rounded" required>
                                    </div>
                                    <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                                        <label for="demo-birthday" class="w-24">出生日期：</label>
                                        <input type="date" id="demo-birthday" class="flex-1 px-3 py-2 border border-gray-300 rounded">
                                    </div>
                                </fieldset>
                                <button type="button" class="px-6 py-2 bg-accent text-white rounded hover:bg-accent/90 transition-colors">
                                    提交
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- 多媒体示例 -->
                    <div class="bg-white rounded-xl p-8 shadow-md">
                        <h3 class="text-2xl font-bold mb-6 text-orange-500">HTML5 多媒体示例</h3>
                        <div class="code-block mb-6">
                            &lt;!-- 视频示例 --&gt;
                            <br>&lt;video controls width="400" poster="poster.jpg"&gt;
                            <br>&nbsp;&nbsp;&lt;source src="movie.mp4" type="video/mp4"&gt;
                            <br>&nbsp;&nbsp;您的浏览器不支持HTML5视频播放。
                            <br>&lt;/video&gt;
                            <br>
                            <br>&lt;!-- Canvas绘图示例 --&gt;
                            <br>&lt;canvas id="myCanvas" width="400" height="200"&gt;
                            <br>&nbsp;&nbsp;您的浏览器不支持Canvas。
                            <br>&lt;/canvas&gt;
                            <br>
                            <br>&lt;script&gt;
                            <br>&nbsp;&nbsp;const canvas = document.getElementById('myCanvas');
                            <br>&nbsp;&nbsp;const ctx = canvas.getContext('2d');
                            <br>&nbsp;&nbsp;ctx.fillStyle = '#3b82f6';
                            <br>&nbsp;&nbsp;ctx.fillRect(50, 50, 100, 100);
                            <br>&lt;/script&gt;
                        </div>
                        <!-- 多媒体示例预览 -->
                        <div class="border border-gray-200 rounded-lg p-6 bg-gray-50 space-y-6">
                            <!-- 模拟视频播放器 -->
                            <div class="text-center">
                                <div class="inline-block relative bg-black rounded-lg overflow-hidden">
                                    <div class="w-[400px] h-[225px] flex items-center justify-center bg-gradient-to-br from-blue-900 to-purple-900">
                                        <i class="fa fa-film text-white text-5xl"></i>
                                        <div class="absolute bottom-4 left-4 right-4 bg-black/70 text-white p-2 rounded">
                                            视频播放器示例
                                        </div>
                                    </div>
                                    <div class="absolute bottom-0 left-0 right-0 bg-black/80 p-2 flex items-center gap-2">
                                        <button class="text-white p-1"><i class="fa fa-play"></i></button>
                                        <div class="flex-1 h-1 bg-gray-600 rounded overflow-hidden">
                                            <div class="h-full bg-primary w-1/3"></div>
                                        </div>
                                        <span class="text-white text-xs">01:23 / 03:45</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Canvas示例 -->
                            <div class="text-center">
                                <canvas id="demoCanvas" width="400" height="200" class="border border-gray-300 rounded"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 快速导航 -->
        <section class="py-12 bg-gradient-primary text-white">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-8 text-center">探索更多HTML5知识</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
                    <a href="#structure" class="bg-white/10 hover:bg-white/20 p-6 rounded-xl text-center transition-all-300 backdrop-blur-sm">
                        <i class="fa fa-sitemap text-3xl mb-3"></i>
                        <h3 class="font-bold">结构标签</h3>
                    </a>
                    <a href="#content" class="bg-white/10 hover:bg-white/20 p-6 rounded-xl text-center transition-all-300 backdrop-blur-sm">
                        <i class="fa fa-file-text text-3xl mb-3"></i>
                        <h3 class="font-bold">内容标签</h3>
                    </a>
                    <a href="#forms" class="bg-white/10 hover:bg-white/20 p-6 rounded-xl text-center transition-all-300 backdrop-blur-sm">
                        <i class="fa fa-wpforms text-3xl mb-3"></i>
                        <h3 class="font-bold">表单标签</h3>
                    </a>
                    <a href="#multimedia" class="bg-white/10 hover:bg-white/20 p-6 rounded-xl text-center transition-all-300 backdrop-blur-sm">
                        <i class="fa fa-picture-o text-3xl mb-3"></i>
                        <h3 class="font-bold">多媒体标签</h3>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                    <div class="flex items-center space-x-2 mb-4 md:mb-0">
                        <i class="fa fa-html5 text-3xl text-orange-500"></i>
                        <h2 class="text-2xl font-bold">HTML5 标签参考</h2>
                    </div>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white hover:text-primary transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-white hover:text-primary transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-white hover:text-primary transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-white hover:text-primary transition-colors">
                            <i class="fa fa-youtube-play text-xl"></i>
                        </a>
                    </div>
                </div>
                <div class="border-t border-gray-700 pt-8">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div>
                            <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                            <p class="text-gray-400">提供高质量的HTML5学习资源，帮助开发者掌握现代Web开发技术。</p>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                            <ul class="space-y-2 text-gray-400">
                                <li><a href="#intro" class="hover:text-primary transition-colors">HTML5简介</a></li>
                                <li><a href="#structure" class="hover:text-primary transition-colors">结构标签</a></li>
                                <li><a href="#content" class="hover:text-primary transition-colors">内容标签</a></li>
                                <li><a href="#forms" class="hover:text-primary transition-colors">表单标签</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-4">订阅更新</h3>
                            <p class="text-gray-400 mb-4">获取最新的HTML5教程和资源更新。</p>
                            <form class="flex">
                                <input type="email" placeholder="您的邮箱" class="px-4 py-2 rounded-l-lg focus:outline-none text-dark flex-1">
                                <button type="button" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
                                    订阅
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">
                    <p>© 2023 HTML5标签参考指南 | 版权所有</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 初始化Chart.js图表
        document.addEventListener('DOMContentLoaded', function() {
            // HTML5市场占有率图表
            const ctx = document.getElementById('html5Chart').getContext('2d');
            const html5Chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['HTML5', 'HTML4', '其他'],
                    datasets: [{
                        data: [85, 10, 5],
                        backgroundColor: [
                            '#3b82f6',
                            '#94a3b8',
                            '#cbd5e1'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: true,
                            text: '现代网站HTML版本使用比例',
                            color: '#333'
                        }
                    }
                }
            });

            // Canvas绘图示例
            const demoCanvas = document.getElementById('demoCanvas');
            if (demoCanvas) {
                const canvasCtx = demoCanvas.getContext('2d');
                
                // 绘制矩形
                canvasCtx.fillStyle = '#3b82f6';
                canvasCtx.fillRect(50, 50, 100, 100);
                
                // 绘制圆形
                canvasCtx.fillStyle = '#10b981';
                canvasCtx.beginPath();
                canvasCtx.arc(250, 100, 50, 0, 2 * Math.PI);
                canvasCtx.fill();
                
                // 绘制文本
                canvasCtx.fillStyle = '#ffffff';
                canvasCtx.font = '20px Arial';
                canvasCtx.textAlign = 'center';
                canvasCtx.fillText('Canvas示例', 200, 180);
            }

            // 移动端菜单切换
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            
            if (menuToggle && mobileMenu) {
                menuToggle.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                });
            }

            // 导航栏滚动效果
            const navbar = document.getElementById('navbar');
            
            if (navbar) {
                window.addEventListener('scroll', function() {
                    if (window.scrollY > 50) {
                        navbar.classList.add('py-2', 'shadow-md');
                        navbar.classList.remove('py-3', 'shadow-sm');
                    } else {
                        navbar.classList.add('py-3', 'shadow-sm');
                        navbar.classList.remove('py-2', 'shadow-md');
                    }
                });
            }

            // 返回顶部按钮
            const backToTopButton = document.getElementById('back-to-top');
            
            if (backToTopButton) {
                window.addEventListener('scroll', function() {
                    if (window.scrollY > 300) {
                        backToTopButton.classList.remove('opacity-0', 'invisible');
                        backToTopButton.classList.add('opacity-100', 'visible');
                    } else {
                        backToTopButton.classList.add('opacity-0', 'invisible');
                        backToTopButton.classList.remove('opacity-100', 'visible');
                    }
                });
                
                backToTopButton.addEventListener('click', function() {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            }

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                        
                        // 如果是移动菜单，点击后关闭
                        if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                            mobileMenu.classList.add('hidden');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>